<script setup lang="ts">
//导入路由
import { useRouter } from 'vue-router';
//导入首页轮播图
import HomeCarousel from "@/components/HomeCarousel.vue";
import HomeMiddle from "@/components/HomeMiddle.vue";
import HomeBottemIcons from "@/components/HomeBottemIcons.vue";
const router = useRouter();
const comeToDownload = () => {

  router.push("/download")
};
//点击搜索框后跳转子路由界面
const testRouter = () => {
  router.push("/toSearch"); // 匹配路由名称
};

import { ref, onMounted } from 'vue';
import { Download } from "@element-plus/icons-vue";
// 输入框轮播文案
const placeholders = ['热门游戏...', '三角洲行动', '番茄免费小说','去哪儿旅行','铁路12306','陌陌','美图秀秀','宝宝巴士'];
const currentPlaceholder = ref(placeholders[0]);
const searchValue = ref('');

// 定时器逻辑
onMounted(() => {
  let timer = setInterval(() => {
    const randomIndex = Math.floor(Math.random() * placeholders.length);
    currentPlaceholder.value = placeholders[randomIndex];
  }, 1500);
});
const handleUserClick = () => {
  const userInfoStr = localStorage.getItem('userInfo'); // 获取登录信息
  if (userInfoStr) {
    try {
      const userInfo = JSON.parse(userInfoStr); // 解析为对象
      const userId = userInfo.id; // 提取用户ID
      router.push({
        name: 'download', // 匹配路由配置的 name
        params: { userId }, // 传递参数
      });
    } catch (error) {
      console.error('解析用户信息失败', error);
      router.push('/sign'); // 解析失败则跳登录
    }
  } else {
    router.push('/sign'); // 未登录则跳登录
  }
};

</script>

<template>
<div class = "homeScreen">
<!-- 顶部容器 -->
  <div class="top-container">
    <!-- 回退按钮 -->
    <button @click="" class="top-back-icon">
      &lt;
    </button>

    <!-- 输入框 -->
      <el-input
        v-model="searchValue"
        :placeholder="currentPlaceholder"
        prefix-icon="search"
        style="border-radius: 10px;width: 90%"
        @focus = "testRouter"
    />

    <!-- 下载按钮 -->
    <button class="download-icon" @click = "handleUserClick">
      <Download />
    </button>
  </div>
  <!-- 添加轮播图组件 -->
  <div>
  <HomeCarousel/>
  </div>

  <!-- 首页中间部分 -->
  <div>
  <HomeMiddle/>
  </div>
  <HomeBottemIcons/>
</div>
</template>

<style scoped>

.homeScreen{
  display: flex;
  flex-direction: column;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 16px;
  overflow: visible;
}
/* 顶部容器：让子元素水平排列 */
.top-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  width: 100%;
  margin-top: 0;
  
}

/* 回退按钮：小尺寸并居中 */
.top-back-icon {
  display: inline-flex;
  align-items: start;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 24px;
  color: black;
  cursor: pointer;
  padding: 4px 8px;
}

/* 下载按钮固定尺寸图标居中 */
.download-icon {
  /* 按钮固定尺寸 */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;


  /* 重置默认样式 */
  background: transparent;
  border: none;
  cursor: pointer;

  /* 图标样式（覆盖默认） */
  color: black;
  font-size: 24px;
  /*hover 动画 */
  transition: color 0.3s ease;
}

 /*首页轮播图 */
.el-carousel__item h3 {
  color: white;
  opacity: 0.75;
  margin: 0;
  font-size: 0;
}




</style>